<template>
	<view class="content">
		<view class="swiper">
			<image @click="bandLoing" :src="web_weixin" v-if="!isShow && userInfo.length == 0"></image>
			<image v-if="isShow && userInfo.length == 0" src="/static/images/2.png"></image>
			<image v-if="!isShow && userInfo.gid" src="/static/images/1.jpg"></image>
		</view>
		<view class="title" v-if="!isShow">
			精选好课
		</view>
		<view class="title" v-else>
			精选好图
		</view>
		<view class="home-img-box">
			<view class="home-top-img">
				<view class="home-conter-left">
					<image class="img-left" :src="tabList[0].litpic" mode="aspectFill" @click="bandVideo(tabList[0])">
					</image>
				</view>
				<view class="home-conter-right">
					<image :src="tabList[1].litpic" mode="aspectFill" @click="bandVideo(tabList[1])">
					</image>
					<image :src="tabList[2].litpic" mode="aspectFill" @click="bandVideo(tabList[2])">
					</image>
				</view>
			</view>
		</view>
		<!-- <view class="bgimg" @click="bandLoing">
			<image mode="aspectFit" src="/static/images/bj.png"></image>
		</view> -->
		<!-- 广告位 -->
		<!-- 		<view class="home-img-box">
			<view class="home-top-img">

				<view class="home-conter-left">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item class="swiperItem">
							<image class="img-left" src="/static/images/kd.jpg" mode="aspectFill" @click="bandVideo(3)">
							</image>
						</swiper-item>
					</swiper>
				</view>
				<view class="home-conter-right">
					<image src="/static/images/mt.jpg" mode="aspectFill" @click="bandVideo(1)">
					</image>
					<image src="/static/images/dy.png" @click="bandVideo(2)">
					</image>
				</view>
			</view>
		</view> -->
		<!-- <view class="list">
			<view class="item" v-for="item in tabList" @click="bandVideo(item)">
				<view class="img">
					<image v-if="item.litpic" :src="url + item.litpic"></image>
				</view>
			</view>
			<view class="box">
				<view class="time">
					{{item.addtime}}
				</view>
				<view class="zan">
					{{item.zan}}
				</view>
			</view>
		</view> -->
		<view class="aboutInfo">
			<view class="version">
				版本号：V1.0.0
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendRequest,
		sendRequestApi
	} from '@/utils/quest.js'
	export default {
		data() {
			return {
				tabList: [],
				columnPage: 1,
				columnLimit: 6,
				web_weixin: '',
				isShow: false,
				userToken: '',
				userInfo: ''
			}
		},
		onLoad() {
			this.getMenuList()
			this.userToken = uni.getStorageSync('userToken');
			this.getUserInfo()
			this.getList()
			this.getTabsList()

		},
		onReady() {
			this.getInfo()
		},
		methods: {
			async getList() {
				const that = this
				const reqBody = {
					model: 'article',
					limit: 10,
					page: 1
				}
				const res = await sendRequest('/GetData/index', 'get', reqBody)
				console.log(res);
				this.list = res.data.data
			},
			bandLoing() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			parseVideoData(videoString) {
				// 去除字符串两边的空格
				videoString = videoString.trim();
				// 使用管道符分割字符串
				const parts = videoString.split('||');
				// 创建一个空数组来存放结果
				const videos = [];
				// 遍历每个部分并解析
				for (let part of parts) {
					// 每个部分用管道符分割成URL和标题
					const [url, title] = part.split('|');
					// 构建对象并添加到数组中
					videos.push({
						title: title,
						url: `http://m.qqorw.com${url}` // 添加基础URL前缀
					});
				}
				return videos;
			},
			// 查询顶部tabs
			getTabsList() {
				const reqBody = {
					model: "classtype", // classtype 栏目
					isshow: "1", // 是否显示 0:否 1:是
					orders: "orders desc", //倒叙查询
				};
				sendRequest("/getData/index", "GET", reqBody).then((res) => {
					const {
						code,
						data
					} = res.data;
					if (code === 0) {
						console.log("data", data);
						this.tabList = data;
						this.loading = false
					}
				});
			},
			async getInfo() {
				const reqBody = {
					model: 'sysconfig'
				};

				const res = await sendRequest("/GetData/index", 'GET', reqBody)
				var webconfig = [];
				var len = res.data.data.length;
				// 对返回的数据进行封装成键值对的形式， 方便调用
				for (var i = 0; i < len; i++) {
					webconfig[res.data.data[i].field] = res.data.data[i].data;
				}
				this.web_weixin = webconfig.web_weixin
				this.webPhone = Number(webconfig.web_phone)
				console.log("this.webPhone", this.webPhone);
			},
			bandVideo(item) {
				console.log('this.isShow', this.isShow);
				console.log("this.userInfo", this.userInfo);
				if (this.isShow || this.userInfo.length == 0) {
					// 跳转道其他地方
					uni.navigateTo({
						url: '/pages/picture/picture?htmlurl=' + item.htmlurl
					})
				} else {
					uni.navigateTo({
						url: '/pages/video/video?htmlurl=' + item.htmlurl
					})
				}
			},
			async getUserInfo() {
				const reqBody = {
					ajax: 1,
					token: this.userToken
				}
				const res = await sendRequest("/user/userinfo", "GET", reqBody);
				this.userInfo = res.data.data
				console.log("userInfo", res.data.data);
			},
			async getMenuList() {
				const url = 'https://video.3r8.cn/api/api.php'
				const res = await sendRequestApi(url, 'GET')
				if (res.data.type == 0) {
					this.isShow = false
				} else {
					this.isShow = true
				}

				console.log('this.isShow', this.isShow);
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		/* 默认为从顶部开始排列 */
		height: 100vh;
		padding: 24rpx;

		.swiper {
			height: 288rpx;
			width: 100%;
			border-radius: 26rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 26rpx;
			}
		}

		.title {
			margin: 24rpx 0;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			border-left: 8rpx solid #538af1;
			padding-left: 16rpx;
		}

		.home-img-box {

			.home-top-img {
				display: flex;
				justify-content: space-between;

				.home-conter-right {
					width: 48%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					border-radius: 26rpx;

					image {
						width: 100%;
						height: 223rpx;
						border-radius: 26rpx;
					}
				}

				.home-conter-left {
					height: 462rpx;
					width: 48%;
					border-radius: 26rpx;

					.img-left {
						height: 462rpx;
						border-radius: 26rpx;
						width: 100%;
					}
				}
			}
		}

		.aboutInfo {
			margin-top: auto;
			/* 这个属性将把 .aboutInfo 推到底部 */
			text-align: center;
			font-size: 24rpx;
			padding-bottom: 40rpx;
		}

	}

	/* .content {
		background: #538af1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		height: 100vh;
	}

	.bgimg {
		width: 100%;
		height: 600rpx;
	}

	.bgimg image {
		width: 100%;
		height: 100%;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 40rpx;
	}

	.list .img {
		flex-basis: calc(50% - 100rpx);
		margin-bottom: 10px;
		height: 200rpx;
		width: 320rpx;
		border-radius: 12rpx;
	}

	.img image {
		height: 200rpx;
		width: 320rpx;
		border-radius: 12rpx;
	}

	.box {
		display: flex;
		justify-content: space-between;
		padding-top: 16rpx;
	}

	.aboutInfo {
		margin-top: auto;
		text-align: center;
		font-size: 24rpx;
		color: aliceblue;
		padding-bottom: 20rpx;
	} */
</style>